﻿@{
    Layout = "Admin_Layout";
    ViewData["Title"] = "商户管理";
}
@section Style {
    <style>
        .mydiv .el-form .el-form-item .el-form-item__content, .el-form-item__label {
            font-size: 15px;
            color: black;
            height: 10px;
            margin-bottom: 5px;
        }

        .mydiv .form-class .el-input__inner {
            width: 200px;
            height: 30px;
            padding: 4px;
        }

        .el-button-operate {
            height: 29px;
            line-height: 0.4;
            width: 80px;
            border-radius: 2px;
        }

            .el-button-operate span {
                font-family: Microsoft YaHei UI;
                color: #fff;
                font-size: 14px;
                letter-spacing: 1px;
            }

        /* 搜索框 */
        .input-with-select {
            width: 260px;
            padding: 4px;
        }
    </style>
}
<div class="mydiv">
    <div style="margin-left:30px;max-width:1200px;">
        <div style="height:40px;">
            <div style="float:left;padding:4px;"><el-button type="danger" class="el-button-operate" @@click="handleBatchDisableStatus(0)">禁用</el-button></div>
            <div style="float:left;padding:4px;"><el-button type="primary" class="el-button-operate" @@click="handleBatchDisableStatus(1)">启用</el-button></div>
            <div style="text-align: right;">
                <div style="float:right;">
                    <el-input placeholder="请输入商家代码或名称搜索" v-model.trim="searchInput" class="input-with-select" size="mini">
                        <el-button slot="append" icon="el-icon-search" @@click="searchHandle"></el-button>
                    </el-input>
                </div>
            </div>
        </div>
        <div>
            <template>
                <el-table :data="tableData" :row-style="{height: '48px'}" :cell-style="{padding: '0'}"
                          style="width: 100%;border-top:1px solid;border-color:lightgray;font-size:13px;min-height:360px;max-height:360px;"
                          @@selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" fixed>
                    </el-table-column>
                    <el-table-column prop="date"
                                     label="日期"
                                     width="140">
                    </el-table-column>
                    <el-table-column prop="code"
                                     label="代码"
                                     width="80">
                    </el-table-column>
                    <el-table-column prop="name"
                                     label="名称"
                                     width="160">
                    </el-table-column>
                    <el-table-column prop="phone"
                                     label="手机"
                                     width="80">
                    </el-table-column>
                    <el-table-column prop="contact"
                                     label="联系人"
                                     width="80">
                    </el-table-column>
                    <el-table-column prop="address"
                                     label="联系地址"
                                     width="200">
                    </el-table-column>
                    <el-table-column prop="status"
                                     label="状态"
                                     width="150">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status"
                                       @@change="statusChanged(scope.row)"
                                       active-text="启用"
                                       inactive-text="禁用">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right"
                                     label="操作"
                                     width="160">
                        <template slot-scope="scope">
                            <el-button size="mini"
                                       @@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <div style="">
            <div class="block" style="margin-top:18px;margin-bottom:20px;">
                <el-pagination
                               @@current-change="handleCurrentChange"
                               :current-page.sync="currentPageNum"
                               :page-size="pageSize"
                               layout="total, prev, pager, next, jumper"
                               background
                               :total="petInfoCount">
                </el-pagination>
            </div>
        </div>
    </div>
    <div style="background-color:black;height:1px; border:none;margin-top:20px;"></div>
    <div style="margin-top:20px;text-align:left;margin-left:30px;">
        <div style="width:800px;">
            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="88px" class="form-class">
                            <div style="float:left;">
                                <div style="font-weight:bold;text-align:center;">商户信息</div>
                                    <div style="margin-top:10px;">
                                    <el-form-item prop="code" label="代码">
                                <el-input maxlength="20" v-model.trim="form.code" :disabled="codeInput"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="name" label="名称">
                                        <el-input maxlength="20" v-model.trim="form.name"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="phone" label="手机">
                                    <el-input maxlength="20" v-model.trim="form.phone"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="contact" label="联系人">
                                    <el-input maxlength="20" v-model.trim="form.contact"></el-input>
                                    </el-form-item>
                                <el-form-item prop="address" label="地址">
                                    <el-input maxlength="50" v-model.trim="form.address"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态">
                                        <el-radio-group v-model="form.status">
                                            <el-radio :label="1">启用</el-radio>
                                            <el-radio :label="2">禁用</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    </div>
                            </div>
                            <div style="float:left;margin-left:20px;">
                        <div style="font-weight:bold;text-align:center;">商户管理员</div>
                        <div style="margin-top:10px;">
                                    <el-form-item prop="account" label="账号">
                                        <el-input maxlength="20" v-model.trim="form.account"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="nickName" label="昵称">
                                        <el-input maxlength="20" v-model.trim="form.nickName"></el-input>
                                    </el-form-item>
                                <el-form-item :prop="passwordRule" label="密码">
                                    <el-input maxlength="20" v-model.trim="form.password" show-password></el-input>
                                </el-form-item>
                                <el-form-item :prop="passwordConfirmRule" label="密码确认">
                                    <el-input  maxlength="20" v-model.trim="form.passwordConfirm" show-password></el-input>
                                  </el-form-item>
                                </div>
                            </div>
                        </el-form>
                        </div>
                        <div style="clear:both;"></div>
                    <div style="margin-left:20px;width:580px;margin-top:30px;text-align:center;">
                        <el-button type="primary" @@click="submitForm('form')" style="width:110px;">确 定</el-button>
                        <el-button @@click="clearForm" style="width:110px;">清 空</el-button>
                    </div>
        </div>
    </div>
</div>
@section Scripts {
    <script>
        var app = new Vue({
            el: "#app",
            mounted: function () {
                this.getMerchantPagination(1, '');
                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                //获取分页信息
                getMerchantPagination(pageNum, searchInput) {
                    axios.post('../../Super/SuperHome/GetMerchantInfoPagination', {
                        "pageNum": pageNum,
                        "codeOrName": searchInput
                    }).then(response => {
                        this.tableData = response.data.data;
                        this.petInfoCount = response.data.dataCount;

                        this.currentPageNum = pageNum;
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
                //搜索
                searchHandle() {
                    this.currentPageNum = 1;
                    this.getMerchantPagination(this.currentPageNum, app.searchInput);
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                //翻页
                handleCurrentChange(val) {
                    this.getMerchantPagination(val, this.searchInput);
                },
                //单行禁用/启用
                statusChanged(row) {
                    var tipInfo = "禁用";
                    if (row.status === true) { 
                        tipInfo = "启用";
                    }

                    this.$confirm('确定要' + tipInfo +'账号吗? ', "确认",
                        {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                        .then(async () => {

                            axios.post('../../Super/SuperHome/ChangeAccountStatus', {
                                "dataids": row.dataid,
                                "status": row.status
                            }).then(response => {
                                if (response.data === 'ok') {
                                    this.getMerchantPagination(this.currentPageNum, this.searchInput);
                                    this.$message({
                                        type: 'success',
                                        message: tipInfo + '成功!'
                                    });
                                }
                            }, error => {
                                alert("错误提示：" + error.message);
                            });

                        })
                        .then(() => {
                            this.msgSuccess(text + "成功");
                        })
                        .catch(() => {
                            //取消
                            row.status = row.status === true ? false : true;
                        });
                },
                //批量禁用/启用
                handleBatchDisableStatus(val) {
                    if (this.multipleSelection.length === 0) {
                        this.$message.warning('请选择数据');
                        return;
                    }

                    let ids = '';
                    this.multipleSelection.forEach((item) => {
                        ids += item.dataid + '|';
                    });

                    ids = ids.substring(0, ids.length - 1);

                    var tipInfo = "禁用";
                    var status = false;

                    if (val === 1) {
                        tipInfo = "启用";
                        status = true;
                    }

                    this.$confirm('确定要' + tipInfo+'这些账号?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        axios.post('../../Super/SuperHome/ChangeAccountStatus', {
                            "dataids": ids,
                            "status": status
                        }).then(response => {
                            if (response.data === 'ok') {
                                this.getMerchantPagination(this.currentPageNum, this.searchInput);
                                this.$message({
                                    type: 'success',
                                    message: tipInfo+'成功!'
                                });
                            }
                        }, error => {
                            alert("错误提示：" + error.message);
                        });

                    }).catch(() => {
                    });
                },
                //编辑数据
                handleEdit(index, row) {
                    this.passwordRule = '';
                    this.passwordConfirmRule = '';

                    this.codeInput = true;
                    app.form.password = '';
                    app.form.passwordConfirm = '';

                    axios.post('../../Super/SuperHome/GetMerchantInfo', {
                        "dataid": row.dataid
                    }).then(res => {
                        app.restoreData(res.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
                //编辑时恢复数据
                restoreData(data) {
                    app.form.dataid = data.dataid;
                    app.form.code = data.code;
                    app.form.name = data.name;
                    app.form.phone = data.phone;
                    app.form.contact = data.contact;
                    app.form.address = data.address;
                    app.form.status = data.status;

                    app.form.accountid = data.accountid;
                    app.form.account = data.account;
                    app.form.nickName = data.nickName;
                },
                //清除输入框
                clearForm() {
                    this.codeInput = false;
                    this.passwordRule = 'password';
                    this.passwordConfirmRule = 'passwordConfirm';
                    app.form.dataid = -1;
                    app.form.code = '';
                    app.form.name = '';
                    app.form.phone = '';
                    app.form.contact = '';
                    app.form.address = '';
                    app.form.status = 1;

                    app.form.accountid = -1;
                    app.form.account = '';
                    app.form.nickName = '';
                    app.form.password = '';
                    app.form.passwordConfirm = '';
                },
                async submitForm(formName) {

                    //添加
                    if (app.form.accountid == -1){
                        if (app.form.password !== app.form.passwordConfirm) {
                            this.$message.error('两次密码输入不一样');
                            return;
                        }
                    }
                    else {
                        if (app.form.password !== '') {
                            if (app.form.password !== app.form.passwordConfirm) {
                                this.$message.error('两次密码输入不一样');
                                return;
                            }
                        }
                    }

                    if (app.form.password !== '') {
                        var regex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,20}");
                        if (!regex.test(app.form.password)) {
                            this.$message.error("密码必须同时包含字母、数字和特殊字符且至少9位");
                            return;
                        }
                    }

                    this.$refs[formName].validate(async (valid) => {
                        if (valid) {

                            var txtData = {
                                "dataid": app.form.dataid, "code": app.form.code, "name": app.form.name, "phone": app.form.phone, "contact": app.form.contact,
                                "address": app.form.address, "status": app.form.status, "accountid": app.form.accountid, "account": app.form.account,
                                "nickName": app.form.nickName, "password": app.form.password
                            };

                            axios.post('../../Super/SuperHome/AddOrUpdateMerchantInfo', txtData).
                            then(res => {
                                if (res.data == 'ok') {
                                    this.$message.success('提交成功');
                                    this.clearForm();
                                    this.getMerchantPagination(this.currentPageNum, this.searchInput);
                                }
                                else {
                                        this.$message.error(res.data);
                                }
                            }, error => {
                                alert("错误提示：" + error.message);
                            });


                        } else {
                            console.log('error submit!');
                            return false;
                        }
                    });
                },
            },
            data() {
                return {
                    codeInput:false,
                    passwordRule: 'password',
                    passwordConfirmRule: 'passwordConfirm',
                    petInfoCount: 0,
                    currentPageNum:1,
                    defaultMenuActive: '3',
                    searchInput: '',
                    pageSize: @Html.Raw(ViewData["pageSize"]),
                    tableData: [],
                    multipleSelection: [],
                    form: {
                        dataid: -1,
                        code: '',
                        name: '',
                        phone: '',
                        contact: '',
                        address: '',
                        status: 1,
                        accountid:-1,
                        account:'',
                        nickName:'',
                        password:'',
                        passwordConfirm:'',
                    },
                    rules: {
                        code: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        name: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        phone: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        contact: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        address: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        account: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        nickName: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                        passwordConfirm: [
                            { required: true, message: '√', trigger: 'blur' }
                        ],
                    },
                }
            }
        });
    </script>
}